<template>
	<div id="chat">
		<div class="sidebar">
			<mycard></mycard>
		</div>
		<div class="main">
		<div class="content">
				<div class="msglist">
					<search></search>
					<chatlist></chatlist>
				</div>
				<div class="chatbox">
					<message></message>
					<v-text></v-text>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import search from '../../components/search/search'
import chatlist from '../../components/chatlist/chatlist'
import message from '../../components/message/message'
import vText from '../../components/text/text'
import mycard from '../../components/mycard/mycard'
export default {
   components: {
    search,
    chatlist,
    message,
    vText,
    mycard
   },
   created() {
     console.log(this.$route.params.name)
   }
}
</script>

<style lang="stylus" scoped>
#chat
  display: flex
  border-radius 50px
  margin: 20px auto
  width: 860px
  height: 600px
  background-color: #fff
  .sidebar
    width: 60px
    height: 600px
    background: #2b2c2f
  .main
    flex: 1
    height: 600px
    background: #f2f2f2
.content
  display: flex
  width: 800px
  .msglist
    width: 250px
    background: rgb(230,230,230)
  .chatbox
    flex: 1
</style>
